<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="../static/css/common.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/index.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/swiper.min.css">
    <script src="../static/js/jquery-1.12.3.min.js"></script>
    <script src="../static/js/flexible.min.js"></script>
    <script src="../static/js/swiper.min.js"></script>
    <script src="../static/js/common.min.js"></script>
    <script src="../static/js/index.min.js"></script>
    <script>
        //获取顶部的球
        let getThemeAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    setTheme(data.theme,data.link);//执行设置球的样式(theme为enroll,upload,invitation,link为跳转的链接)，如果不是enroll,去掉底部报名按钮
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }

        $(function(){
            //跳过开屏视频
            $(".jump,.star-video").on("click",function(){
                //$(".star-video").get(0).pause();
                $(".star-yell").addClass("not-display");
                $(".index-container").removeClass("not-display");

                getActiveVideoList(); //动态获取视频
                getlearningState(); //获取当前学习的站点
            });
            $(".star-video").on("ended",function(){
                $(".star-yell").addClass("not-display");
                $(".index-container").removeClass("not-display");

                getActiveVideoList(); //动态获取视频
                getlearningState(); //获取当前学习的站点
            });

            //开屏进度条加载            
            loadingAction(getActiveVideoList,getlearningState);
            
            //获取正在学习，已打卡，未打卡数据
            function getlearningState(){
                //获取当前学习的站点
                $.ajax({
                    url: 'xxxxx',
                    type: 'get',
                    dataType: 'json',
                    data: {  },//数据
                    success: function (data) {
                        uploadVideo(data.learningIndex);//参数为正在学习的站点索引 第一站为0

                        // !如果打卡是按顺序的可以注释掉以下
                        var arr1 = data.unlearning ; //未打卡的站点索引（数组）例如：[2,3,4]
                        for(var q=0;q<arr1.length;q++){
                            $('.swiper-slide .learning').eq(arr1[q]).css('background-image','url(../static/images/index/learning1.png)');
                        }
                        var arr2 = data.learned; //已打卡的站点索引（数组）例如：[7,8,9]
                        for(var k=0;k<arr1.length;k++){
                            $('.swiper-slide .learning').eq(arr1[q]).css('background-image','url(../static/images/index/learning0.png)');
                        }
                    },
                    error: function(data){
                        uploadVideo(1);
                    }
                })
            }

            function getActiveVideoList(){
                //获取视频数据（如果不动态获取，可直接在html标签中添加）
                $.ajax({
                    url: 'xxxxx',
                    type: 'get',
                    dataType: 'json',
                    data: {  },//数据
                    success: function (list) {
                        if(list != null){
                            var videoList ="";
                            for(var i=0;i<list.length;i++){
                                //假设：list[i].id 视频id 
                                //list[i].video 视频url , list[i].videoImg 视频略缩图， list[i].intro 视频简介 
                                videoList += `
                                <div class="swiper-slide" data-id="`+ list[i].id +`">
                                    <div class="learning"></div>
                                    <video class="video_pic" src="`+ list[i].video +`" poster="`+ list[i].videoImg +`" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                                    <p class="title">第1站 - 参赛指南</p>
                                    <div class="video_play"></div>
                                </div>
                                `
                            }
                            videoList.length > 0 ? $('.swiper-wrapper').html(videoList):'';
                        }
                
                        //获取当前学习的站点
                        $.ajax({
                            url: 'xxxxx',
                            type: 'get',
                            dataType: 'json',
                            data: {  },//数据
                            success: function (index) {
                                uploadVideo(index);
                            }
                        })
                    },
                    error: function(data){
                        console.log(data);
                    }
                });
            }
        });
    </script>
    <title>51Talk之星 中华少年说</title>
</head>
<body>
    <div class="index-progress">
        <img class="badge" src="../static/images/index/badge.png" />
        <img class="logo" src="../static/images/index/logo.png" />
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <p class="loading-progress">正在加载...<span class="loading-number">0</span>%</p>
    </div>
    <div class="star-yell not-display">
        <!-- <video class="star-video" src="http://demo.lanrenzhijia.com/demo/51/5183/demo/vedio/sintel.mp4" poster="../static/images/index/starPoster.png"  style="object-fit:fill" poster="../static/images/index/starPoster.png" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline x5-video-orientation="portraint" x5-playsinline="true" playsinline="true" webkit-playsinline="true"></video> -->
        <img class="star-video" src="../static/images/index/starPoster.png" />
        <!-- <img class="star-play" src="../static/images/index/play.png" /> -->
        <img class="jump" src="../static/images/index/jump.png" />
    </div>
    <div class="index-container not-display">
        <div class="header">
            <img class="header-bg" src="../static/images/index/header.png" />
            <div class="rule">
                <img class="rule-img" src="../static/images/activityRule.png" />
            </div>
            <div class="action enroll">
            </div>
            <div class="next-arrow"></div>
        </div>
        <div class="small-site">
            <div class="site-btn1 site-btn active">第1-5站</div>
            <div class="site-btn2 site-btn">第6-10站</div>
            <div class="site-btn3 site-btn">第11-17站</div>
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" data-id="1">
                        <div class="learning"></div>
                        <video class="video_pic" src="http://demo.lanrenzhijia.com/demo/51/5183/demo/vedio/sintel.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline controls  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="2">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="3">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="3">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="3">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="3">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="3">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                    <div class="swiper-slide" data-id="3">
                        <div class="learning"></div>
                        <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline muted  x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                        <p class="title">第1站 - 参赛指南</p>
                        <div class="video_play"></div>
                    </div>
                </div>
            </div>
            <div class="slide-lr"></div>
        </div>
        <div class="star-cheer">
            <img class="watch" src="../static/images/index/watch.png" />
            <img class="qcodeBox" src="../static/images/index/qcodeBox.png" />
            <!---二维码-->
            <img class="qcode" src="../static/images/index/qcode.png" />
            <p class="word">
                长按扫描二维码<br>
                观看8位明星助威完整视频
            </p>
            <div class="advertise-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" data-id="1">
                        <img class="adv" src="../static/images/index/starCheerAdv1.png" />
                    </div>
                </div>
            </div>
        </div>
        <div class="enroll-progress">
            <a class="enroll-below" href="#"></a>
            <p class="column1">1-关注活动官方微信公众号</p>
            <p class="column2">2-提交报名信息</p>
            <p class="column3">3-打卡学习</p>
            <p class="column4">4-上传报名视频</p>
            <p class="column5">5-好友加油助威</p>
        </div>
        <div class="operation"></div>
        <div class="footer"></div>
    </div>
    <iframe id="rule" name="rule" src="rule.html"></iframe>
</body>
</html>